.mask-model {
  pointer-events: none;
  --cb: cubic-bezier(0.17, 0.67, 0.83, 1.64);
  --dur: 200ms;
  --height: 300px;
  will-change: background-color;
  background-color: rgba($color: #000000, $alpha: 0);
  transition: background-color var(--dur) var(--cb);
}
.top,
.bottom {
  will-change: transform;
  transition: transform var(--dur) var(--cb);
  left: 0;
  position: absolute;
  width: 100%;
}
.top {
  height: calc(100vh - var(--height) - 50px);
  background-color: #fff;
  top: 10px;
  transform: translateY(calc(var(--height) + 50px - 100vh));
}
.bottom {
  height: var(--height);
  bottom: 10px;
  transform: translateY(calc(var(--height)));
}

.dialogShow {
  &.mask-model {
    pointer-events: visible;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }
  .top {
    transform: translateY(0);
  }
  .bottom {
    transform: translateY(0);
  }
}
